<template>
	<div class="home-icons">
		<swiper :options="swiperOption">
		    <swiper-slide
		    	v-for="(page,index) of pages"
		    	:key="index"
		    >
				<div class="icon-item" v-for="item of page" :key="item.id">
					<div class="icon-img-wrapper">
						<img class="icon-img" :src="item.imgUrl">
					</div>
					<p class="icon-desc">{{item.iconDesc}}</p>
				</div>
			</swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
		
	</div>
</template>

<script>
	export default {
		name:'homeIcons',
		props:{
			list:Array
		},
		data() {
			return {
				swiperOption:{},
			}
		},
		computed: {
			pages() {
				/*轮播的页数*/
				const pages=[];
				this.list.forEach((item,index) => {
					/*第几页*/
					const page=Math.floor(index/8);
					/*如果页数不存在*/
					if(!pages[page]) {
						/*设置当前页数为空数组*/
						pages[page]=[];
					}
					/*向数组中添加数据*/
					pages[page].push(item);
				})
				return pages;
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import 'styles/varible';
	@import 'styles/mixins';
	.home-icons /deep/ .swiper-container {
		height: 0;
		padding-bottom: 50%;
	}
	.home-icons {
		margin-top: .2rem;
		.icon-item {
			position: relative;
			overflow: hidden;
			float: left;
			height: 0;
			width: 25%;
			padding-bottom: 25%;
			.icon-img-wrapper {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: .46rem;
				box-sizing: border-box;
				padding: .1rem .1rem 0;
				.icon-img {
					display: block;
					margin:0 auto;
					height: 100%;
				}
			}
			.icon-desc {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: .46rem;
				line-height: .46rem;
				text-align: center;
				color:$darkTextColor;
				@include textEllipsis;
			}
		}
	}
</style>